<template>
  <div class="categoryGroup">
    <!-- 首页管理 -->
    <div class="categoryItem">
      <a class="categoryButton blue" @click="navigateTo('/admin/home-page')">
        <div class="relative z-10">
          <div class="categoryButtonText">首页管理</div>
          <div class="text-white text-opacity-80 text-sm mt-1">管理网站首页内容</div>
        </div>
        <!-- Home SVG -->
        <svg class="custom-icon" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"
            fill="currentColor" />
        </svg>
      </a>
    </div>

    <!-- 关于我们 -->
    <div class="categoryItem">
      <a class="categoryButton green" @click="navigateTo('/admin/about-page')">
        <div class="relative z-10">
          <div class="categoryButtonText">关于我们</div>
          <div class="text-white text-opacity-80 text-sm mt-1">编辑公司信息</div>
        </div>
        <!-- Info Circle SVG -->
        <svg class="custom-icon" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
            fill="currentColor" />
        </svg>
      </a>
    </div>

    <!-- 用户管理 -->
    <div class="categoryItem">
      <a class="categoryButton purple" @click="navigateTo('/admin/users')">
        <div class="relative z-10">
          <div class="categoryButtonText">用户管理</div>
          <div class="text-white text-opacity-80 text-sm mt-1">管理系统用户</div>
        </div>
        <!-- Users SVG -->
        <svg class="custom-icon" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M144 160a80 80 0 1 1 160 0 80 80 0 1 1 -160 0zm368 0a80 80 0 1 1 160 0 80 80 0 1 1 -160 0zM32 288a96 96 0 1 1 192 0A96 96 0 1 1 32 288zm416 0a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM144 512a128 128 0 1 1 256 0h-32a96 96 0 1 0 -192 0H144zm240 0a96 96 0 1 1 192 0h-32a64 64 0 1 0 -128 0H384z"
            fill="currentColor" />
        </svg>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
:root {
  --anzhiyu-shadow-blue: 0 8px 12px -3px #358bff80;
  --anzhiyu-shadow-green: 0 8px 12px -3px #18e7ae80;
  --anzhiyu-shadow-purple: 0 8px 12px -3px #9c27b080;
  --anzhiyu-white: #fff;
}

.categoryGroup {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
  height: 100px;
  width: 100%;
  animation: slide-in 0.6s 0.2s backwards;
  margin-bottom: 20px;
}

.categoryItem {
  width: calc(100% / 3 - 0.33rem);
  height: 100%;
  margin-right: 0.5rem;
  overflow: hidden;
  transform: scale(1);
  transition: all 0.8s cubic-bezier(0.65, 0.15, 0.37, 1.19);
  border-radius: 12px;
  position: relative;
}

.categoryItem:last-child {
  margin-right: 0;
}

a.categoryButton {
  height: 100%;
  width: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding-left: 21px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--anzhiyu-white);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* 图标初始状态 */
a.categoryButton .custom-icon {
  position: absolute;
  right: 0;
  top: 20%;
  width: 80px;
  height: 80px;
  opacity: 0.2;
  filter: blur(2px);
  transform: rotate(15deg);
  transition: all 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  color: currentColor;
}

/* 悬停时图标状态 */
.categoryItem:hover .custom-icon {
  opacity: 0.8;
  width: 40px;
  height: 40px;
  filter: blur(0);
  transform: rotate(0deg);
  top: 35%;
  transition-delay: 0.15s;
}

/* 按钮颜色样式 */
a.categoryButton.blue {
  background: linear-gradient(to right, #358bff, #15c6ff);
  box-shadow: var(--anzhiyu-shadow-blue);
}

a.categoryButton.green {
  background: linear-gradient(to right, #18e7ae, #1eebeb);
  box-shadow: var(--anzhiyu-shadow-green);
}

a.categoryButton.purple {
  background: linear-gradient(to right, #9c27b0, #e91e63);
  box-shadow: var(--anzhiyu-shadow-purple);
}

/* 悬停时宽度变化 */
.categoryItem:hover {
  width: 50%;
}

/* 下划线样式 */
a.categoryButton:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 21px;
  width: 1rem;
  height: 2px;
  background: var(--anzhiyu-white);
  border-radius: 1px;
  transform: translateY(10px);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 768px) {
  .categoryGroup {
    display: none;
  }
}
</style>